<template>
  <div class="content">
    <el-card>
      <!-- 头部 -->
      <div>
        <el-row type="flex">
          <el-col>
            <el-button type="primary" @click="isShowDialog= true">添加页面</el-button>
          </el-col>
          <el-col>
            <el-row type="flex" justify="end">
              <el-input v-model="searchContent" placeholder="请输入要搜索的页面" />
              <el-button plain @click="searchFn">筛选</el-button>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <!-- 分割线 -->
      <el-divider />
      <!-- 表格 -->
      <el-table :data="pageList" style="width: 100%">
        <el-table-column label="标题" prop="title" />
        <el-table-column label="内容">
          <template v-slot="{row}">
            <div style="max-height:200px;overflow-x:hidden" v-html="row.content" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button size="mini" type="primary" @click="editFn(row.id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="delFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-divider />
      <!-- 分页 -->
      <el-row type="flex" justify="center">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="page"
          @current-change="currentChange"
        />
      </el-row>
    </el-card>
    <!-- 弹窗-->
    <el-dialog :visible="isShowDialog" :title="formData.id?'编辑页面':'新增页面'" :close-on-click-modal="false" @close="btnCenter">
      <el-form ref="formData" :model="formData" :rules="rules">
        <el-form-item label="标题" label-width="100px" prop="title">
          <el-input v-model="formData.title" />
        </el-form-item>
        <el-form-item label="内容" label-width="100px" prop="content">
          <VueEditor v-model="formData.content" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnCenter">取 消</el-button>
        <el-button type="primary" :disabled="isDisabled" @click="btnOk">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入接口
import { addPages, delPages, editPages, getPageCount, getPagesDetail, getPagesList } from '@/api/Page'
// 富文本插件
import { VueEditor } from 'vue2-editor'
export default {
  // 注册富文本
  components: { VueEditor },
  data() {
    return {
      isDisabled: false,
      pageList: [],
      formData: {
        title: '',
        content: ''
      },
      rules: {
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '标题不能为空', trigger: 'blur' }
        ]
      },
      total: 0,
      isShowDialog: false,
      searchContent: '',
      searchData: '',
      page: 1,
      pageSize: 2
    }
  },
  created() {
    this.getPageList()
  },
  methods: {
    // 获取列表
    async getPageList(searchData) {
      const { data } = await getPagesList({ title_contains: searchData, _limit: this.pageSize, _start: (this.page - 1) * this.pageSize })
      const res = await getPageCount({ title_contains: this.searchData })
      this.pageList = data
      this.total = res.data
    },
    // 编辑按钮
    async editFn(id) {
      const { data } = await getPagesDetail(id)
      this.formData = data
      this.isShowDialog = true
    },
    // 删除按钮
    async delFn(id) {
      await this.$confirm('确定要删除吗?')
      await delPages(id)
      if (this.pageList.length === 1 && this.page > 1) {
        this.page--
      }
      this.$message.success('删除成功')
      this.getPageList(this.searchData)
    },
    // 关闭弹窗
    btnCenter() {
      this.isShowDialog = false
      this.formData = {
        title: '',
        content: ''
      }
      this.$refs.formData.resetFields()
    },
    // 弹窗确定按钮
    async btnOk() {
      await this.$refs.formData.validate()
      this.isDisabled = true
      if (this.formData.id) {
        await editPages(this.formData)
      } else {
        await addPages(this.formData)
      }
      this.$message.success('操作成功')
      this.isShowDialog = false
      setTimeout(() => {
        this.isDisabled = false
      }, 1000)
      this.getPageList()
    },
    // 筛选按钮
    searchFn() {
      this.searchData = this.searchContent
      this.page = 1
      this.getPageList(this.searchData)
    },
    // 点击页面
    currentChange(val) {
      this.page = val
      this.getPageList(this.searchData)
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
   padding: 20px;
 }
</style>
